<template>
    <div class="page-group">
        <div class="page page-current">
            <header class="bar bar-nav">
                <h1 class='title'>{{title}}</h1>
            </header>
            <div class="content">
                <div class="content-block ">
                    <div class="tabs">
                        <div id="home" class="tab" :class="[hash=='home'?'active':'']">
                            <home-form></home-form>
                        </div>
                        <div id="business" class="tab" :class="[hash=='business'?'active':'']">
                            <business></business>
                        </div>
                        <div id="setting" class="tab" :class="[hash=='setting'?'active':'']">
                            <div class="content-block">
                                <setting></setting>
                            </div>
                        </div>
                    </div>
                </div>
                <nav class="bar bar-tab">
                    <a class="tab-link tab-item" :class="[hash=='home'?'active':'']" href="#home"
                       @click="storeHash('home')"> <span
                            class="icon icon-home"></span>
                        <span class="tab-label">首页</span> </a>
                    <a class="tab-link tab-item" :class="[hash=='business'?'active':'']" href="#business"
                       @click="storeHash('business')"> <span
                            class="icon icon-home"></span>
                        <span class="tab-label">业务</span> </a>
                    <a class="tab-link tab-item  external"
                       :class="[hash=='setting'?'active':'']" href="#setting"
                       @click="storeHash('setting')">
                        <span class="icon icon-cogs"></span> <span
                            class="tab-label">我的</span> </a>
                </nav>
            </div>
        </div>
    </div>
</template>
<script>
    import Setting from './setting/settingHome.vue'
    import HomeForm from './home/form.vue'
    import Business from './business/index.vue'
    import * as FStore from './util/FStorage'

    export default{
        components: {
            Setting, HomeForm, Business
        },
        data: function () {
            return {
                title: 'vue sui kit'
            }
        },
        computed: {
            hash: function () {
                var hash = FStore.getSesstionItem('activeMenu')
                if (!hash) {
                    hash = 'home'
                }
                return hash;
            }
        },
        methods: {
            storeHash: function (hash) {
                FStore.setSesstionItem('activeMenu', hash)
            },
        }
    }
</script>